<template>
  <div class="shop">
    <h2 style="padding: 20px; background-color: #fff">商品分析</h2>
    <h3 style="padding: 20px; background-color: #fbfbfb">商品概况</h3>
    <div class="shop-data">
      <div class="shop-data-item">
        <p>6,030</p>
        <span>商品总数</span>
      </div>
      <div class="shop-data-item">
        <p>856</p>
        <span>活动商品</span>
      </div>
      <div class="shop-data-item">
        <p>2,344</p>
        <span>销售库存</span>
      </div>
    </div>
    <h3 style="padding: 20px; background-color: #fbfbfb">分类数据</h3>
    <div class="cate-data" style="background-color: #fff">
      <div ref="cateDom" style="height: 500px;padding: 20px;"></div>
      <div ref="marketDom" style="height: 500px;padding: 20px;"></div>
    </div>
  </div>
</template>
  
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const cateDom = ref(null);
const marketDom = ref(null);
let catedata = ref({
  title: {
    text: "Referer of a Website",
    subtext: "Fake Data",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    right: "right",
  },
  series: [
    {
      name: "分类分布",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1339, name: "时令果蔬" },
        { value: 1099, name: "新鲜蔬菜" },
        { value: 1094, name: "肉禽蛋类" },
        { value: 889, name: "海鲜水产" },
        { value: 450, name: "粮油调味" },
        { value: 405, name: "乳品烘焙" },
        { value: 381, name: "酒水冲调" },
        { value: 250, name: "日用百货" },
        { value: 212, name: "个护清洁" },
        { value: 211, name: "生活服务" },
        { value: 189, name: "其他" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
let marketdata = ref({
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    right: "right",
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '销售金额',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '销售订单',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
})
onMounted(async () => {
  let mycate = echarts.init(cateDom.value);
  let mymarket = echarts.init(marketDom.value);
  catedata.value && mycate.setOption(catedata.value);
  marketdata.value && mymarket.setOption(marketdata.value);
});
</script>
  <style>
.shop {
  width: 100%;
}
.shop-data {
  display: flex;
  background-color: #fff;
}
.shop-data-item {
  padding: 20px;
  margin: 30px;
}
.shop-data-item p {
  font-size: 40px;
}
.cate-data {
  display: flex;
}
.cate-data > div {
  flex: 1;
}
</style>
  